<template>
	<div class="hom-pro-list" v-if="productData.length>0">
		<div class="product-swiper">
			<view class="titleLeft">
				<view class="titleLeftItem" @click="tabCange(1)">
					<view>新品上市</view>
				</view>
				<view class="titleRightItem">
					<view>上心优质新款商务装</view>
				</view>
			</view>
			<view class="btn-more a-link" @click="itemClick('新品上市')">进去逛逛
				<image src="https://cereshop-mall.oss-cn-qingdao.aliyuncs.com/resources/icon_next(1).png"></image>

			</view>
			<div class="product-swiper-box">
				<div class="product-swiper-warp" v-for="(item,index) in productData" :key="index">
					<div class=" product-swiper-item" @click="jumpProductDetail(item)">
						<div class="product-swiper-img">
							<img class="img pic-img default-img" :src="item.image">
						</div>
						<div class="product-swiper-info">
							<h3 class="product-name">{{item.productName}}</h3>
							<div class="stock">
								库存：{{item.stockNumber}}
							</div>
							<div class="priceWrap">
								<div class="price" :style="{fontSize:item.price.toString().length>3?'29upx':'32upx'}">
									¥ {{item.price}}
								</div>
								<div class="priceWrapIconList">
									<div class="priceWrapIconListItem" v-if="item.jdDiscount">
										<image src="https://cereshop-mall.oss-cn-qingdao.aliyuncs.com/resources/icon_jd.jpg"></image>
										<div>{{item.jdDiscount}}折</div>
									</div>
									<div class="priceWrapIconListItem" v-if="item.tmDiscount">
										<image src="https://cereshop-mall.oss-cn-qingdao.aliyuncs.com/resources/icon_tm.jpg"></image>
										<div>{{item.tmDiscount}}折</div>
									</div>
									<div class="priceWrapIconListItem" v-if="item.vipDiscount">
										<image src="https://cereshop-mall.oss-cn-qingdao.aliyuncs.com/resources/icon_wph.png"></image>
										<div>{{item.vipDiscount}}折</div>
									</div>
								</div>
							</div>
							<view class="vipInfoBttom">
								<view>400+评价</view>
								<view>500+付款</view>
							</view>
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="pagination new-pagination"></div> -->
		</div>
		<!-- <button v-show="componentContent.showMore" class="btn-more" @click="jumpProList(componentContent.productData)">查看全部 <span class="icon iconfont icon-arrow-right"></span></button> -->
	</div>
</template>

<script>
	import {
		commonMixin
	} from '../mixin'
	export default {
		mixins: [commonMixin],
		// data () {
		// return {
		//   index: 1,
		//   swiperOption: {
		//     slidesPerView: 3,
		//     spaceBetween: 12,
		//     autoplay: false, // 可选选项，自动滑动
		//     loop: true,
		//     pagination: {
		//       el: '.new-pagination'
		//     }
		//   }
		// }
		// }
		methods:{
			itemClick(name){
				uni.navigateTo({
					url:'/pages_category_page1/goodsModule/goodsList?name='+name + '&contentType=1'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.titleLeft {
		display: flex;
		align-items: center;
		height: 60upx;
		margin-bottom: 20upx;
		padding-top: 24upx;

		.titleLeftItem {
			padding-right: 16upx;
			font-size: 32upx;
			color: #333;
			font-weight: bold;

			view {
				text-align: center;
			}

			.changeText {
				color: #EFB257;
				font-size: 32upx;

				span {
					width: 32upx;
					height: 4upx;
					background-color: #EFB257;
					border-radius: 18upx;
					display: block;
					margin: 0 auto;
					margin-top: 4upx;
				}
			}
		}

		.titleRightItem {
			padding-left: 16upx;
			border-left: 1px solid #999;
			font-size: 24upx;
			color: #999;
		}
	}

	.vipInfoBttom {
		display: flex;
		justify-content: space-between;
		margin-top: 8upx;

		view {
			font-size: 20upx;
			color: #999999;
		}
	}

	.priceWrap {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.priceWrapIconList {
			display: flex;
			justify-content: space-between;

			.priceWrapIconListItem {
				width: 40upx;

				image {
					width: 30upx;
					height: 30upx;
					border-radius: 8upx;
					margin-bottom: 4upx;
					display: block;
					margin: 0 auto;
				}

				div {
					font-size: 16upx;
					color: #EF1414;
				}
			}
		}

	}

	.hom-pro-list {
		::v-deep .swiper-wrapper {
			position: static;
		}

		/**横向滑动**/
		.product-swiper {
			width: 690upx;
			margin: 0 auto;
			padding: 0upx 20upx 0;
			background-color: #fff;
			box-sizing: border-box;
			position: relative;
			margin-top: 36upx;
			border-radius: 16upx;

			&+.btn-more {
				margin-top: 20upx;
			}

			.title {
				padding: 22upx 0upx 0 0;

				label {
					background-image: none;
					color: #A56C4C;
					font-style: italic;
					padding: 0;
				}
			}

			&-box {
				padding-bottom: 20upx;
				display: flex;
				overflow: auto;
			}

			&-item {
				width: 240upx;
				position: relative;
				background-color: #FFFFFF;
				margin-right: 16upx;
			}

			&-img {
				width: 240upx;
				height: 260upx;
				position: relative;
				

				// &:after{
				//   content: '';
				//   display: block;
				//   width: 54upx;
				//   height: 54upx;
				//   // background: url("../../../static/images/newProduct/flag-new.png") no-repeat;
				//   background-size: 100% 100%;
				//   position: absolute;
				//   top: 0;
				//   left: 0;
				// }
				.img {
					width: 100%;
					height: 100%;
					object-fit: contain;
					border-radius: 16upx;
				}
			}

			&-info {
				background-color: #FFFFFF;

				.product-name {
					width: 200upx;
					font-size: 28upx;
					font-weight: 400;
					color: #333;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin: 16upx 0 8upx;
				}
				.price {
					// font-size: 32upx;
					font-weight: bold;
					color: #EF1414;
				}
				.stock {
					color: #999999;
					font-size: 24upx;
					display: inline-block;
					margin-bottom: 8upx;
				}

			}
		}
	}

	.pagination {
		display: flex;
		justify-content: center;
		width: 100%;
		bottom: 0;

		::v-deep .swiper-pagination-bullet {
			width: 24upx;
			height: 4upx;
			background: #FFFFFF;
			opacity: 0.5;
			border-radius: 2upx;
			margin: 0 10upx;
		}

		::v-deep .swiper-pagination-bullet-active {
			opacity: 1;
		}
	}

	.btn-more {
		position: absolute;
		right: 24upx;
		top: 23upx;
		line-height: 33upx;
		font-size: 24upx;
		color: #999999;
		display: flex;
		align-items: center;

		image {
			width: 24upx;
			height: 24upx;
			margin-left: 8upx;
		}
	}
</style>
